<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D变换_缩放</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            width: 1000px;
            height: 1000px;
            border:2px solid black;
            margin: 800px;

        }
        .inner{
            width: 500px;
            height: 500px;
            background-color: deepskyblue;
            text-align: center;
            line-height: 300px;
            margin: auto;
            /*
            缩放:小数为缩小,正数为放大,负数为反转,里边的文字也会进行缩放,第一个值为宽,第二个值为高
            其实可以看作是宽和高的两条线到中心线距离的倍数变化

            缩放对行内元素不起作用

            可以让浏览器出现小于12px的字体
            */
            transform: scaleX(1);
            transform: scaleY(1);
            transform: scale(1,1);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner</div>
</div>

</body>
</html>